<template>
    <div>
        <el-drawer
            :title="title"
            :size="size"
            :before-close="handleClose"
            :visible.sync="visible"
            direction="rtl"
            custom-class="wc-my-drawer"
            ref="drawer"
        >
            <template #title>
                <div v-if="$scopedSlots.title">
                    <slot name="title" />
                </div>
            </template>

            <div class="my-drawer-content">
                <div class="my-drawer__body">
                    <slot></slot>
                </div>

                <div class="my-drawer__footer">
                    <slot name="footer">
                        <div class="abc">
                            <div class="">
                                <el-button size="small" @click="handleClose">取消</el-button>
                                <el-button size="small" type="primary" @click="onSubmit()">{{ btnTitle }}</el-button>
                            </div>
                        </div>
                    </slot>
                </div>
            </div>
        </el-drawer>
    </div>
</template>

<script>
import { PageMode } from '@/utils/type'

export default {
    name: 'MyDrawer',
    props: {
        size: {
            type: [String, Number],
            default: '50%'
        },
        title: {
            type: String,
            default: '标题'
        },
        visible: {
            type: Boolean,
            default: false
        },
        direction: {
            type: String,
            default: 'rtl'
        },
        mode: {
            type: String,
            default: PageMode.ADD
        },
        confirmBtnText: {
            type: String,
            default: ''
        }
    },
    
    data() {
        return {
            localVisible: false,
        }
    },
    computed: {
        btnTitle() {
            if(this.confirmBtnText) {
                return this.confirmBtnText
            }
            return this.mode === PageMode.ADD ? '添加' : "编辑"
        }
    },
    methods: {
        handleClose() {
            this.$emit('close', false)
            this.$emit('update:visible', false)
        },
        // 这里的提交，应该是交由父组件调用子组件自己的方法。
        onSubmit() {
            this.$emit('submit')
        }
    }
}
</script>

<style lang="scss">
.wc-my-drawer {
    .el-drawer__header {
        margin-bottom: 0;
        padding-bottom: 32px;
        font-size: 18px;
        color: #333333;
        border-bottom: solid 1px #ddd;
    }
    .el-drawer__body {
        display: flex;
        flex: 1;
        overflow: hidden;
    }
}
.my-drawer-content {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    width: 100%;
}
.my-drawer__body {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
}
.my-drawer__footer {
    border-top: solid 1px #ddd;
    padding: 20px;
}
</style>
